<template>
	<view class="page">
		<view>
			<wd-navbar title="问题反馈" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
			<view class="content_box">
				<wd-textarea custom-class="cus_textarea" placeholder="请详细描述您的问题或建议，我们将及时跟进解决。" v-model="message.ques"  clearable />
				<wd-gap height="40rpx"></wd-gap>
				<wd-input v-model="message.remark" placeholder="QQ/手机号(请填写,方便我们联系您)" custom-class="cus_input" no-border/>
				<wd-button custom-class="wd_btn" @click="handleClick" :disabled="!message.ques?.length" block>提交</wd-button>
			</view>
		</view>
		<view>
			<view class="d-flex-center">
				<wd-text size="14px" color="#333333" text="客服电话："></wd-text>
				<wd-text size="14px" color="#FE3D64" text="400-0000-000"></wd-text>
			</view>
			<wd-gap safeAreaBottom></wd-gap>
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { ref } from 'vue';
const message = ref({
	ques: '',
	remark: ''
})
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const handleClick = ()=> {
	uni.showToast({
		title: '提交中...',
		icon: 'loading'
	})
	uni.request({
		url: '/api/wallpaper/feedback/add',
		method: 'POST',
		data: {
			content: message.value.ques,
			concat: message.value.remark,
			username: uni.getStorageSync('wpa_username')
		},
		success: (res) => {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			})
			message.value = {
				ques: '',
				remark: ''
			}
		}
	})
}
</script>

<style lang="scss" scoped>
:deep() {
	.nav {
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
	}
	.cus_textarea {
		width: 100%;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin-bottom: 10px;
	}
	.cus_input {
		padding: 20rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin-bottom: 10px;
	}
	.wd_btn {
		background: #FE4484;
		margin-top: 94rpx;
		--wot-color-theme: #FE4484;
		&.is-disabled {
			--wot-color-theme: #BFBFBF;
			--wot-button-disabled-opacity: 1;
		}
	}
}
.page {
	position: relative;
	display: flex;
	flex-flow: column;
	height: 100vh;
	justify-content: space-between;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.content_box {
	padding: 40rpx;
}
</style>
